<template>
	<view class="page">
		<view>
			<uni-section title="商品" type="circle" :subTitle="machineInfo.name">
				<template v-slot:right>
					<view v-if="machineInfo.izOnline == '1'">
						<button size="mini" type="warn" v-if="!doorOpen" @click="handleOpenDoor">
							开门
						</button>
						<button size="mini" type="primary" v-else @click="drupSelectGoods">
							新增
						</button>
					</view>
					<view v-else>
						<text style="color:red;">设备离线</text>
					</view>
				</template>
				<uni-list v-if="goodsList.length > 0">
					<uni-list-item
						thumbSize="lg"
						v-for="(item, index) in goodsList" 
						:key="index" 
						:title="item.goodsName" 
						:note="`库存：${item.stock}`" 
						:thumb="item.goodsPicture"
					>
						<template v-slot:footer>
							<view class="action-box" v-if="doorOpen">
								<view class="a" @click="handleUpdateGoods(item.goodsId)">数量</view>|
								<view class="a" @click="handleDeleteGoods(item.goodsId)" style="color: red;">删除</view>
							</view>
							<view class="action-box" style="justify-content: flex-end; font-size: 13px;color: #868585;" v-else>
								库存:{{item.stock}}
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<empty-view v-else></empty-view>
			</uni-section>
		</view>
		<view class="btn-box" v-if="doorOpen">
			<button type="primary" @click="handleFinal">补货完成</button>
		</view>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		
		data() {
			return {
				machineId: "",
				machineInfo: "",
				goodsList: [],
				doorOpen: false
			}
		},
		
		onLoad(options) {
			let { machineId } = options
			if(machineId) {
				this.machineId = machineId
				this.getMachineInfo()
				this.getMachineGoods()
			}
		},
		
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
		},
		
		methods: {
			handleAddGoods( record ) {
				if(Object.keys(record).length > 0) {
					let has = this.goodsList.find( item => {
						return item.goodsId == record.id
					})
					
					if(!has) {
						this.goodsList.push({
							goodsId: record.id,
							goodsName: record.name,
							goodsPicture: record.picture,
							goodsPrice: record.sellPrice,
							stock: 0
						})
						
						this.handleUpdateGoods(record.id)
					}
				}
			},
			
			handleUpdateGoods(id) {
				uni.showModal({
					editable: true,
					title: '设置数量',
					placeholderText: '设置商品数量',
					success: res => {
						if(res.confirm) {
							this.goodsList = this.goodsList.map( item => {
								if(item.goodsId == id) {
									item.stock = res.content
								}
								return item
							})
						}
					}
				})
			},
			
			handleDeleteGoods( id ) {
				this.goodsList = this.goodsList.filter( item => {
					return item.goodsId !== id
				})
			},
			
			getMachineInfo() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getMachineDetail',
					data: {
						machineId: this.machineId
					},
					success: res => {
						if(res.data.success) {
							this.machineInfo = res.data.result
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			getMachineGoods() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getMachineGoods',
					data: {
						machineId: this.machineId
					},
					success: res => {
						if(res.data.success) {
							let goodsList = []
							
							if(res.data.result.length > 0) {
								res.data.result.forEach( item => {
									goodsList = [ ...item.goodsList, ...goodsList]
								})
							}
							
							this.goodsList = goodsList
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			handleOpenDoor() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/stockOpen',
					method: "POST",
					data: {
						machineId: this.machineId,
				   userId: uni.getStorageSync('uid')
					},
					success: res => {
						if(res.data.success) {
							this.doorOpen = true;
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			drupSelectGoods() {
				uni.navigateTo({
					url: `/pages/stock/goods`
				})
			},
			
			handleFinal() {
				let goodsList = this.goodsList.map( item => {
							return {
								goodsId: item.goodsId,
								stock: item.stock
							}
						})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/completeStock',
					method: "POST",
					data: {
						goodsList,
						machineId: this.machineId,
						userId: uni.getStorageSync('uid')
					},
					success: res => {
						if(res.data.success) {
							uni.showToast({
								icon:'success',
								title: '操作成功',
								duration: 2000
							})
							setTimeout( () => {
								uni.navigateBack()
							}, 2000)
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	
	.action-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 70px;
		height: 100%;
		color: #d5d5d5;
	}
	
	.btn-box {
		padding: 40rpx 20rpx 80rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-top: 1px solid #d5d5d5;
		box-shadow: 0px -4rpx 5px rgba(0, 0, 0, 0.3);
	}
	
	.bottom-title {
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		font-size: 24rpx;
		height: 50rpx;
		text-align: center;
	}
</style>